<!--  -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="16" :sm="24">
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button style="margin-right: 20px" type="primary" @click="getData()">查询</a-button>
                            <a-button icon="plus" @click="add()">新增</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table size="small" rowKey="id" :loading="isload" @change="handleTableChange" :columns="columns" :data-source="dataList"   :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size}"  >
        <template slot="ruleDate" slot-scope="text, record">
            <div>{{record.ruleNameOne}}:{{record.specNameOne}}</div>
               <div>{{record.ruleNameTwo}}:{{record.specNameTwo}}</div>
         </template>
           
            <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <a-button type="link" @click="update(record)">修改</a-button>
                    <a-popconfirm
                        title="是否确认删除当前数据?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="del(record)"
                    >
                        <a-button type="link">删除</a-button>
                    </a-popconfirm>
                </div>
            </template>
        </a-table>

        <!-- 添加、修改、删除个人推送消息 -->
        <a-modal
            title="添加、修改规格模版"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="visible = false"
            >
            <div>
                <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }">
                     <a-form-item label="规格名称">
                        <a-input v-model="item.templateName" placeholder="请输入规格名称" allow-clear></a-input>
                    </a-form-item>
                    <a-form-item  label="规格内容" >
                        <a-tag
                        :key="tag"
                        color="pink"
                        v-for="tag in ruleNameList"
                        closable
                        :disable-transitions="false"
                        @close="handleClosesRuleName(tag)">
                        {{tag}}
                        </a-tag>
                        <a-input-search
                        enter-button="添加"
                        class="input-new-tag"
                        v-if="ruleNameVisible"
                        v-model="ruleNameInput"
                        ref="saveTagRuleName"
                        size="small"
                        style="width:200px"
                        @search="handleRuleNameConfirm"
                     
                        >
                        </a-input-search>
                        <a-button v-if="!ruleNameVisible && ruleNameList.length<2" class="button-new-tag " size="small" @click="showRuleName">+ 添加规格名称</a-button>
                    </a-form-item>
                        <a-form-item :label="ruleNameList[0]" v-if="ruleNameList.length>=1" >
                        <a-tag
                        :key="tag"
                        
                        color="orange"
                        v-for="tag in specNameOne"
                        closable
                        :disable-transitions="false"
                        @close="handleCloseSpecNameOne(tag)">
                        {{tag}}
                        </a-tag>
                        <a-input-search
                        enter-button="添加"
                        class="input-new-tag"
                        v-if="specNameOneVisible"
                        v-model="specNameOneInput"
                        ref="saveTagSpecNameOne"
                        size="small"
                         style="width:200px"
                        @search="handleSpecNameOneConfirm"
                        >
                        </a-input-search>
                        <a-button v-if="!specNameOneVisible " class="button-new-tag " size="small" @click="showSpecNameOne">+ 添加属性</a-button>
                    </a-form-item>
                    <a-form-item :label="ruleNameList[1]" v-if="ruleNameList.length>=2" >
                        <a-tag
                        :key="tag"
                        v-for="tag in specNameTwo"
                        closable
                        :disable-transitions="false"
                        @close="handleCloseSpecNameTwo(tag)">
                        {{tag}}
                        </a-tag>
                        <a-input-search
                         enter-button="添加"
                        class="input-new-tag"
                        v-if="specNameTwoVisible"
                        v-model="specNameTwoInput"
                        ref="saveTagSpecNameTwo"
                        size="small"
                         style="width:200px"
                        @search="handleSpecNameTwoConfirm"
                        >
                        </a-input-search>
                        <a-button v-if="!specNameTwoVisible " class="button-new-tag " size="small" @click="showSpecNameTwo">+ 添加属性</a-button>
                    </a-form-item>
                    <a-form-item  label="   " v-if="ruleNameList.length>0 && specNameOne.length>0" >
                        <a-button type="primary" class=""  @click="_goodsSpecAdd" style="width: 260px;" >添加规格模版</a-button>
                    </a-form-item> 
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { columns } from './table';
import { querySpecTemplate , updateSpecTemplate } from '@/api/mall/spec';
export default {
    data () {
        return {
            userId: undefined,
            brandId: this.global.brandId,
            brandList: [],
            isload: false,
            dataList: [],
            size: 10,
            page: 1,
            total: 0,
            columns,
            visible: false,
            confirmLoading: false,
            item: {
                id: undefined,
                ruleNameOne: '',
                ruleNameTwo: '',
                templateName: '',
            },
            isAdd: true,
            ruleNameList: [],
            ruleNameVisible: false,
            ruleNameInput: '',
            specNameOne:[],
            specNameOneVisible:false,
            specNameOneInput:"",
            specNameTwo:[],
            specNameTwoVisible:false,
            specNameTwoInput:"",
            specList:[],//规格列表商品
        };
    },
    async created(){
        this.getData()
    },
    methods: {
        getData(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId':_this.brandId,
                'size':_this.size,
                'page':_this.page - 1,
            }
            querySpecTemplate(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
    
        // 添加
        add(){
            this.isAdd = true
            this.item={
                id: undefined,
                ruleNameOne: '',
                specNameOne: '',
                ruleNameTwo: '',
                specNameTwo: '',
                templateName: '',
            }
            this.ruleNameList = []
            this.specNameOne=[]
            this.specNameTwo = []
            if(this.brandId == ''){
                this.$message.warning('请选择品牌！');
                return
            }
           
            console.log(this.item)
            this.visible = true
        },
        // 修改
        update(item){
            this.isAdd = false
            this.item = JSON.parse(JSON.stringify(item))
            console.log(item,"item")
            if(this.item.ruleNameTwo){
                  this.ruleNameList=[this.item.ruleNameOne,this.item.ruleNameTwo]
            }else{
                 this.ruleNameList=[this.item.ruleNameOne]
            }
            this.specNameOne=[]
            this.specNameTwo=[]
           
            this.item.specNameOne.split(',').forEach(item => {
                this.specNameOne.push(item)
                });
                 if( this.item.specNameTwo){
                      this.item.specNameTwo.split(',').forEach(item => {
                        this.specNameTwo.push(item)
                    });
           
                 }
           
            this.visible = true
        },
        // 确认添加、修改
        handleOk(){
            let _this = this
          
           
        },
        // 删除消息
        del(item){
            let _this = this
            const params = {
                'id':item.id,
                'isDelete':1,
            }
            updateSpecTemplate(params)
            .then(res=>{
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: '删除成功',
                        duration: 8,
                    })
                    _this.getData()
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 规格
        //规格
        handleClosesRuleName(tag) { 
            this.ruleNameList.splice(this.ruleNameList.indexOf(tag), 1);
        },

      showRuleName() {
        this.ruleNameVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagRuleName.$refs.input.focus();
        });
      },
      handleRuleNameConfirm() {
        let ruleNameInput = this.ruleNameInput;
        if (ruleNameInput) {
          this.ruleNameList.push(ruleNameInput);
        }
        this.ruleNameVisible = false;
        this.ruleNameInput = '';
      },
      //规格1
      handleCloseSpecNameOne(tag) { 
        this.specNameOne.splice(this.specNameOne.indexOf(tag), 1);
      },
      showSpecNameOne() {
        this.specNameOneVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagSpecNameOne.$refs.input.focus();
        });
      },
      handleSpecNameOneConfirm() {
        let specNameOneInput = this.specNameOneInput;
        if (specNameOneInput) {
          this.specNameOne.push(specNameOneInput);
        }
        this.specNameOneVisible = false;
        this.specNameOneInput = '';
      },
      //规格2
      handleCloseSpecNameTwo(tag) { 
        this.specNameTwo.splice(this.specNameTwo.indexOf(tag), 1);
      },
      showSpecNameTwo() {
        this.specNameTwoVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagSpecNameTwo.$refs.input.focus();
        });
      },
      handleSpecNameTwoConfirm() {
        let specNameTwoInput = this.specNameTwoInput;
        if (specNameTwoInput) {
          this.specNameTwo.push(specNameTwoInput);
        }
        this.specNameTwoVisible = false;
        this.specNameTwoInput = '';
      },
       // 生成规格
      _goodsSpecAdd(){
        var ruleNameOne,ruleNameTwo,_this=this
        if(this.ruleNameList.length==1){
          ruleNameOne=this.ruleNameList[0]
          ruleNameTwo=""
        }else if(this.ruleNameList.length==2){
          ruleNameOne=this.ruleNameList[0]
          ruleNameTwo=this.ruleNameList[1]
        }
        console.log(this.specNameOne,"this.specNameOne")
          console.log(this.specNameTwo,"this.specNameTwo")

            if(_this.item.templateName == ''){
                _this.$message.warning('请输入规格名称！');
                return
            }
             const params = {
                'brandId':_this.brandId,
                'templateName':_this.item.templateName,
                'id':_this.item.id,
                'ruleNameOne':ruleNameOne,
                'ruleNameTwo':ruleNameTwo,
                'specNameOne':String(_this.specNameOne),
                'specNameTwo':String(_this.specNameTwo),
            }
            updateSpecTemplate(params)
            .then(res=>{
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: _this.isAdd ? '添加成功' : '修改成功',
                        duration: 8,
                    })
                    _this.getData()
                    _this.visible = false
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
      },
    }
}

</script>
<style scoped>

</style>